<template>
  <div class="app-container-flex">
    <NewFullScreen v-model="showDialog" :title="title">
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="infoList"></basic-information>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>例外产品</p>
        </div>
        <div class="model-panel-body">
          <div class="layui-card-body">
            <!-- 表格 -->
            <page-table
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :api="undefined"
              :pager="false"
              :query="filterInfo.query"
              :field-list="tableInfo.fieldList"
              :handle="tableInfo.handle"
              :check-box="false"
              :tab-index="true"
              :isDynamic="true"
            >
              <template v-slot:col-licenseNumber="scope">
                <p>{{ scope.row.licenseNumber }}</p>
                <p>{{ scope.row.brandName }}</p>
              </template>
              <template v-slot:col-commonName="scope">
                <p>{{ scope.row.commonName }}</p>
                <p>{{ scope.row.productCode }}</p>
                <p>{{ scope.row.alias }}</p>
              </template>
              <template v-slot:col-type="scope">
                <p>{{ scope.row.productTypeValue }}</p>
                <p>{{ scope.row.codeTypeValue }}</p>
                <p>{{ scope.row.productCategoryValue }}</p>
              </template>
              <template v-slot:col-standard="scope">
                <p>{{ scope.row.standard }}</p>
                <p>{{ scope.row.unitName }}</p>
              </template>
            </page-table>
          </div>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="details">
import { getDepotProductById, getDepotProductAll } from '@/api/core'
const props = defineProps(['visible', 'id'])
const { proxy } = getCurrentInstance()
const emits = defineEmits()

const title = ref('仓库产品详情')
const infoList = ref({
  data: {},
  fieldList: [
    { label: '仓库名称', value: 'depotName' },
    { label: '状态', value: 'statusValue' },
    { label: '是否以领定消', value: 'isReceiveConsumeValue' },
  ],
})
const filterInfo = ref({
  query: {
    depotId: props.id,
  },
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '证号\n生产厂家', value: 'licenseNumber', type: 'slot' },
    { label: '通用名称\n编码\n别名', value: 'commonName', type: 'slot' },
    {
      label: '产品类型\n条码类型\n产品分类',
      value: 'type',
      type: 'slot',
    },
    { label: '规格\n计量单位', value: 'standard', type: 'slot' },
  ],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  getMain()
  getList()
})

function getList() {
  let query = { coreDepotProductId: props.id }
  getDepotProductAll(query).then((resp) => {
    if (resp && resp.success) {
      tableInfo.value.data = resp.data
    }
  })
}
function getMain() {
  getDepotProductById(props.id).then((resp) => {
    if (resp && resp.success) {
      infoList.value.data = resp.data
    }
  })
}
</script>

<style scoped></style>
